import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage, injectIntl } from 'react-intl';
import { stripesConnect } from '@folio/stripes/core';
import { MultiColumnList, Button } from '@folio/stripes/components';
import moment from 'moment';
import ActivitySearchForm from './fruit-pack';

import 'moment-timezone';

class FruitList extends Component {
  static manifest = Object.freeze({
    partyListGetHttpInvoke: {
      type: 'okapi',
      accumulate: true,
      path: () => 'party/info'

    }
  });

  static propTypes = {
    stripes: PropTypes.object,
    selectActivityTarget: PropTypes.func.isRequired,
    mutator: PropTypes.shape({
      partyListGetHttpInvoke: PropTypes.shape({
        PUT: PropTypes.func.isRequired,
        POST: PropTypes.func.isRequired,
        GET: PropTypes.func.isRequired,
        DELETE: PropTypes.func.isRequired
      })
    }).isRequired,
    labelName: PropTypes.object,
    intl:PropTypes.func
  };

  constructor(props) {
    super(props);

    this.logger = props.stripes.logger;
    this.log = this.logger.log.bind(this.logger);
    this.state = {
      data: []
    };
    this.label = this.props.labelName;
  }

  componentDidMount() {
    // this.list(null);
  }

  search = ({ requestPreferences, creds, ...formData }) => {
    let query = '';
    if (formData) {
      if (formData.propertyName) {
        query += ` and propertyName = ${formData.propertyName}* `;
      }
      if (formData.approval) {
        query += ` and approval = ${formData.approval} `;
      }
      if (formData.partyName) {
        query += ` and partyName = ${formData.partyName}* `;
      }

      query += ` and partyEndDate >= ${moment().format('YYYY-MM-DD')} 23:59:59 `;
    }
    let param = ' isDel = 0 and isCalendar = 0 ';
    if (query) { param += query; }

    this.list(param);
  };

  list = param => {
    const { GET } = this.props.mutator.partyListGetHttpInvoke;

    try {
      GET({ params: { query: param } })
        .then(res => {
          const data = res.partyGroup;
          this.setState({
            data
          });
        })
        .catch(e => console.info(e));
    } catch (e) {
      console.log(e);
    }
  };

  render() {
    const { intl } = this.props;
    const formatter = {
      name:   <FormattedMessage id="ui-party.loans.columns.party.partyName" />,
      propertyName:  <FormattedMessage id="ui-party.loans.columns.party.propertyName" />,
      quota:  <FormattedMessage id="ui-party.loans.columns.party.quota" />,
      partyStartDate: <FormattedMessage id="ui-party.loans.columns.party.partyDate" />,
      edit:  <FormattedMessage id="ui-party.loans.columns.operating" />
    };
    return (
      <div>
        <ActivitySearchForm
          onSubmit={this.search}
          add={this.add}
          {...this.props}
        />
        <MultiColumnList
          interactive={false}
          height={300}
          isEmptyMessage={<FormattedMessage id="ui-party.empty.list" />}
          totalCount={5}
          virtualize
          contentData={this.state.data}
          onNeedMoreData={this.moreData}
          columnMapping={formatter}
          columnWidths={{
            name: '30%',
            partyStartDate: '30%',
            propertyName: '12%',
            quota: '15%',
            edit: '13%'
          }}
          visibleColumns={[
            'name',
            'propertyName',
            'quota',
            'partyStartDate',
            'edit'
          ]}
          formatter={{
            edit: item => [
              <Button
                onClick={() => {
                  this.props.selectActivityTarget(item);
                }}
              >
                {intl.formatMessage({ id: 'ui-party.select' })}
              </Button>
            ],
            serialNumber: item => [<span>{item.rowIndex + 1}</span>],
            propertyName: item => [
              <div
                title={item.propertyName}
                style={{
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis'
                }}
              >
                {item.propertyName}
              </div>
            ],
            name: item => [
              <div
                title={item.partyName}
                style={{
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis'
                }}
              >
                {item.partyName}
              </div>
            ],
            partyStartDate: item => [
              <div
                title={item.partyStartDate}
                style={{
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis'
                }}
              >
                {item.partyStartDate}
              </div>
            ]
          }}
        />
      </div>
    );
  }
}

export default injectIntl(stripesConnect(FruitList));
